import React from 'react'
import { Input, Select, Row, Col } from 'antd'
import http from 'libs/http'

export default class AddAddressDialog extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      provinceCode: '',
      cityCode: '',
      areaCode: '',
      streetCode: '',
      realName: '',
      mobile: '',
      address: '',
    }
  }

  componentDidMount = () => {
    this.getProvinces()
  }

  // 获取省份列表
  getProvinces = (cb) => {
    const { type, editAddressData } = this.props
    http.get('/student/area/provinces').then(res => {
      this.setState({ provinceList: res.data, type, editAddressData }, () => { cb && cb() })
    })
  }

  // 获取城市列表
  getCities = (cb) => {
    const { provinceCode } = this.state
    http.get('/student/area/cities', { provinceCode }).then(res => {
      this.setState({ cityList: res.data }, () => { cb && cb() })
    })
  }

  // 获取区域列表
  getAreas = (cb) => {
    const { cityCode } = this.state
    http.get('/student/area/areas', { cityCode }).then(res => {
      this.setState({ areaList: res.data }, () => { cb && cb() })
    })
  }

  // 获取街道列表
  getStreets = (cb) => {
    const { areaCode } = this.state
    http.get('/student/area/streets', { areaCode }).then(res => {
      this.setState({ streetList: res.data }, () => { cb && cb() })
    })
  }

  handleChange = type => value => {
    this.setState({
      [type+'Code']: value,
    })
    if(type === 'province') {
      this.setState({
        cityList: [],
        areaList: [],
        streetList: [],
        cityCode: '',
        areaCode: '',
      }, this.getCities)
    }
    else if(type === 'city') {
      this.setState({
        areaList: [],
        streetList: [],
        areaCode: '',
      }, this.getAreas)
    }
    else if(type === 'area') {
      this.setState({
        streetList: [],
      }, this.getStreets)
    }
  }

  // 保存地址
  handleSaveAddress = () => {
    const {
      realName,
      mobile,
      provinceCode,
      cityCode,
      areaCode,
      streetCode,
      address,
    } = this.state
    const data = {
      realName,
      mobile,
      province: provinceCode,
      city: cityCode,
      area: areaCode,
      street: streetCode,
      address,
    }
    http.post('/student/student-address/add', data).then(res => {
      this.props.realodAddressList()
    })
  }

  onChangeConsignee = e => {
    this.setState({ realName: e.target.value })
  }

  onAddressChange = e => {
    this.setState({ address: e.target.value })
  }

  onMobileChange = e => {
    this.setState({ mobile: e.target.value })
  }

  closeDialog = () => {
    this.setState({
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      provinceCode: null,
      cityCode: null,
      areaCode: null,
      streetCode: null,
      realName: '',
      mobile: '',
      address: '',
    }, this.props.closeDialog)
  }

  render() {
    const { 
      provinceList, provinceCode, cityList, cityCode,
      areaList, areaCode, streetList, streetCode, type, realName, address, mobile,
    } = this.state
    const { showDialog } = this.props
    return (
      showDialog && <div className="dialog-container">
        <div className="dialog">
          <span onClick={this.closeDialog} className="close"></span>
          <p className="dialog-title">{type === 'add' ? '新增收货地址' : '编辑收货地址'}</p>
          <div className="dialog-content">
            <div className="form-item">
              <label>*收货人</label>
              <Input 
                onChange={this.onChangeConsignee}
                value={realName}
                className="consignee" type="text" placeholder="收货人信息" />
            </div>
            <div className="form-item">
              <label className="label-address">*地址</label>
              {/* <Cascader options={addressData} size="large" style={{ width: 470, marginBottom: 20 }} /> */}
              <Row gutter={10} style={{ display: 'inline-block' }}>
                <Col span={6}>
                  <Select 
                    size="large" 
                    style={{ width: 110 }} 
                    // value={provinceCode}
                    onChange={this.handleChange('province')}
                    placeholder="省/直辖市"
                  >
                    {
                      provinceList.map(province => (
                        <Option key={province.provinceCode}>{province.provinceName}</Option>
                      ))
                    }
                  </Select>
                </Col>
                <Col span={6}>
                  <Select 
                    size="large" 
                    style={{ width: 110 }} 
                    // value={cityCode}
                    onChange={this.handleChange('city')}
                    placeholder="市"
                  >
                    {
                      cityList.map(city => (
                        <Option key={city.cityCode}>{city.cityName}</Option>
                      ))
                    }
                  </Select>
                </Col>
                <Col span={6}>
                  <Select 
                    size="large" 
                    style={{ width: 110 }} 
                    // value={areaCode}
                    onChange={this.handleChange('area')}
                    placeholder="区/县"
                  >
                    {
                      areaList.map(area => (
                        <Option key={area.areaCode}>{area.areaName}</Option>
                      ))
                    }
                  </Select>
                </Col>
                <Col span={6}>
                  <Select 
                    size="large" 
                    style={{ width: 110 }} 
                    // value={streetCode}
                    onChange={this.handleChange('street')}
                    placeholder="乡镇/街道"
                  >
                    {
                      streetList.map(street => (
                        <Option key={street.streetCode}>{street.streetName}</Option>
                      ))
                    }
                  </Select>
                </Col>
              </Row>
              
            </div>
            <div className="form-item">
              <label></label>
              <Input 
                onChange={this.onAddressChange}
                value={address}
                className="detailed-address" type="text" placeholder="详细地址" />
            </div>
            <div className="form-item">
              <label>*手机</label>
              <Input 
                onChange={this.onMobileChange}
                value={mobile}
                type="text" placeholder="手机号" />
            </div>
          </div>
          <div className="dialog-btn-wrap">
            <span onClick={this.handleSaveAddress}>保存</span>
            <span onClick={this.closeDialog}>取消</span>
          </div>
        </div>
        <div className="mask"></div>
      </div> || ''
    )
  }
}
